<template>
    <div>
        <h3>房号列表</h3>
        <input type="button" value="导出" class="btn btn-info" @click="exportfn">
        <input type="file" @change="fn">
        <input type="button" value="导入" class="btn btn-warning" @click="importfn">
        房号名称:<input type="text" v-model="type.housenoname">
        <input type="button" value="查询" class="btn btn-info" @click="Show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @change="checkedall"></td>
                    <td>房号名称</td>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>房型价格</td>
                </tr>
                <tr v-for="item in data.list" :key="item.houseNoId">
                    <td><input type="checkbox" v-model="ids" :value="item.houseNoId" @change="idsall"></td>
                    <td>{{ item.houseNoName }}</td>
                    <td>{{ item.houseTypeName }}</td>
                    <td>
                        <img :src="item.photo" width="60" height="60">
                    </td>
                    <td>{{ item.price }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, registerRuntimeCompiler } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
onMounted(() => {
    Show();
})
//导出
const exportfn = () => {
    type.pagesize = 20;
    location.href = `https://localhost:7093/api/HouseType/ExprotExcel?pageindex=${type.pageindex}
    &pagesize=${type.pagesize}&housenoname=${type.housenoname}`
}
//导入
let obj: any = ref(null)
const fn = (e: any) => {
    obj.value = e.target.files[0];
}
const importfn = () => {
    //将获取的文件转成fromdata格式
    let f = new FormData();
    f.append("file", obj.value)
    //发送网络请求
    axios({
        url: '/api/HouseType/ImportExcel',
        method: 'post',
        data: f
    })
        .then((res) => {
            console.log(res);
            if (res.data > 0) {
                alert('导入成功')
                Show();
            }
            else {
                alert('导入失败')
                return;
            }
        })
        .catch((err) => {
            console.log(err);

        })
}
//全选反选
let checked = ref(false);
let ids = ref([]);
const checkedall = () => {
    if (checked.value) {
        ids.value = data.list.map((item: any) => {
            return item.houseNoId
        })
    }
    else {
        ids.value = [];
    }
}
const idsall = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true
    }
    else {
        checked.value = false
    }
}
//获取房号列表,后端
let data: any = reactive({
    listcount: '',
    pagecount: '',
    list: '',
})
let type: any = reactive({
    pageindex: 1,
    pagesize: 3,
    housenoname: '',
    houseTypeId: '',
})
const Show = () => {
    axios({
        url: '/api/HouseType/GetHouseNoList',
        method: 'get',
        params: type
    })
        .then((res) => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch((err) => {
            console.log(err);

        })
}
</script>

<style scoped></style>